<script setup>
import SelectProductCategories from "@/components/Selects/ProductCategories"
import SelectProduct from "@/components/SelectProduct/index.vue"
import { goodsBaseGetEnums } from "@/api/public"
import DkInputNumber from "@/components/DKComponents/InputNumber/index.vue"

const props = defineProps({
  formData: Object,
})

const originConfigLogistics = {
  baseUrl: window.APP_GETEWAY.goods,
  url: "/api/goods/get-logistics-attributes",
  method: "get",
}

const skuList = ref([])
const visibleProductSku = ref(false)

const handleDelProductSku = (value, index) => {
  if (!index && index !== 0) {
    props.formData.product_sku = []
  } else {
    props.formData.product_sku.splice(index, 1)
  }
}

watch(skuList, (value) => {
  props.formData.product_sku = [...new Set([...props.formData.product_sku, ...value.map((v) => v.sku)])]
})

const handleProductSku = (list) => {
  props.formData.product_sku = [...new Set([...(props.formData.product_sku || []), ...list.map((v) => v.sku)])]
}

const handleOpenProductSku = () => {
  visibleProductSku.value = true
}

const optionsListTort = ref([])
const optionsListShopStatus = ref([])
const initOptions = async () => {
  const res = await goodsBaseGetEnums({ name: ["goods.GoodsSpu", "goods.GoodsSku"] })
  optionsListTort.value = res.data["goods.GoodsSpu"][0].brandTypeText
  optionsListShopStatus.value = res.data["goods.GoodsSku"][0].salesStatusText
}
onMounted(() => {
  initOptions()
})
const formatter = (e) => {
  return e.map((v) => ({ value: v.label, label: v.label }))
}
</script>

<template>
  <el-form-item label="订单产品包含SKU：">
    <el-button type="primary" @click="handleOpenProductSku">+ 添加</el-button>
  </el-form-item>
  <el-form-item>
    <div class="country-box">
      <div class="item" v-for="(item, index) in formData.product_sku" :key="index">
        <span>{{ item }}</span>
        <svg-icon icon-class="del" @click="() => handleDelProductSku(item, index)" />
      </div>
    </div>
    <el-link type="danger" v-show="props.formData?.product_sku?.length" :underline="false" class="ml-2" @click="handleDelProductSku">清除 </el-link>
  </el-form-item>
  <el-form-item label="产品数量区间：">
    <VGroup>
      <DkInputNumber v-model="formData.product_start_number" :precision="0" :controls="false" :isInte="true" placeholder="最低" />
      <div class="v-group-item">
        <svg-icon icon-class="section" />
      </div>
      <DkInputNumber v-model="formData.product_end_number" :precision="0" :controls="false" :isInte="true" placeholder="最高" />
      <span class="v-group-item">个</span>
    </VGroup>
  </el-form-item>
  <el-form-item label="产品SKU总数量区间：">
    <VGroup>
      <DkInputNumber v-model="formData.sku_start_number" :precision="0" :controls="false" :isInte="true" placeholder="最低" />
      <div class="v-group-item">
        <svg-icon icon-class="section" />
      </div>
      <DkInputNumber v-model="formData.sku_end_number" :precision="0" :controls="false" :isInte="true" placeholder="最高" />
      <span class="v-group-item">个</span>
    </VGroup>
  </el-form-item>
  <el-form-item label="产品分类：">
    <SelectProductCategories filterable multiple collapse-tags v-model="formData.product_category" slotType="cascader" style="width: 370px" />
  </el-form-item>
  <el-form-item label="商品物流属性（包含）：">
    <VXSelect multiple collapse-tags clearable filterable :originConfig="originConfigLogistics" v-model="formData.in_attribute" :formatter="formatter" />
  </el-form-item>
  <el-form-item label="商品物流属性（不包含）：">
    <VXSelect multiple collapse-tags clearable filterable :originConfig="originConfigLogistics" v-model="formData.ex_attribute" :formatter="formatter" />
  </el-form-item>
  <el-form-item label="商品中文名包含关键词：">
    <el-input v-model="formData.product_keyword" class="input" type="textarea" :rows="5" placeholder="请填写，一行一个" />
  </el-form-item>
  <el-form-item label="商品侵权风险（包含）：">
    <el-checkbox-group v-model="formData.in_tort">
      <el-checkbox v-for="item in optionsListTort" :label="item.value" :key="item.value">
        {{ item.label }}
      </el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="商品侵权风险（不包含）：">
    <el-checkbox-group v-model="formData.ex_tort">
      <el-checkbox v-for="item in optionsListTort" :label="item.value" :key="item.value">
        {{ item.label }}
      </el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="商品状态：">
    <VXSelect multiple collapse-tags clearable :list="optionsListShopStatus" v-model="formData.product_status" />
  </el-form-item>
  <el-form-item label="订单产品总重量：">
    <VGroup>
      <DkInputNumber v-model="formData.product_start_weight" :precision="0" :controls="false" :isInte="true" placeholder="请输入整数" />
      <div class="v-group-item">
        <svg-icon icon-class="section" />
      </div>
      <DkInputNumber v-model="formData.product_end_weight" :precision="0" :controls="false" :isInte="true" placeholder="请输入整数" />
      <span class="v-group-item">g</span>
    </VGroup>
  </el-form-item>
  <el-form-item label="订单产品总体积：">
    <VGroup>
      <DkInputNumber v-model="formData.product_start_volume" :precision="0" :controls="false" :isInte="true" placeholder="请输入整数" />
      <div class="v-group-item">
        <svg-icon icon-class="section" />
      </div>
      <DkInputNumber v-model="formData.product_end_volume" :precision="0" :controls="false" :isInte="true" placeholder="请输入整数" />
      <span class="v-group-item">cm³</span>
    </VGroup>
  </el-form-item>
  <el-form-item label="订单体积重区间：">
    <VGroup>
      <DkInputNumber v-model="formData.product_start_volume_weight" :precision="0" :controls="false" :isInte="true" placeholder="请输入整数：" />
      <div class="v-group-item">
        <svg-icon icon-class="section" />
      </div>
      <DkInputNumber v-model="formData.product_end_volume_weight" :precision="0" :controls="false" :isInte="true" placeholder="请输入整数" />
      <span class="v-group-item">g</span>
    </VGroup>
  </el-form-item>
  <el-form-item label="订单抛率区间：">
    <VGroup>
      <el-input-number v-model="formData.start_parabolic_rate" :precision="2" :controls="false" placeholder="最低" />
      <div class="v-group-item">
        <svg-icon icon-class="section" />
      </div>
      <el-input-number v-model="formData.end_parabolic_rate" :precision="2" :controls="false" placeholder="最高" />
    </VGroup>
  </el-form-item>
  <el-form-item label="产品包装长宽高：">
    <VGroup>
      <el-input v-model="formData.product_package_length" placeholder="长" type="number" style="width: 100px" oninput="value=value.replace(/[^\d]/g, '')">
        <template #prefix><span class="dk-iconfont icon-ArrowLeft"></span></template>
      </el-input>
      <el-input v-model="formData.product_package_width" placeholder="宽" type="number" style="width: 100px" oninput="value=value.replace(/[^\d]/g, '')">
        <template #prefix><span class="dk-iconfont icon-ArrowLeft"></span></template>
      </el-input>
      <el-input v-model="formData.product_package_height" placeholder="高" type="number" style="width: 100px" oninput="value=value.replace(/[^\d]/g, '')">
        <template #prefix><span class="dk-iconfont icon-ArrowLeft"></span></template>
      </el-input>
      <span class="v-group-item">cm</span>
    </VGroup>
  </el-form-item>
  <el-form-item label="自定义周长：">
    <VGroup>
      <el-input v-model="formData.custom_perimeter" type="number" placeholder="周长" style="width: 100px">
        <template #prefix><span class="dk-iconfont icon-ArrowLeft"></span></template>
      </el-input>
      <span class="v-group-item">cm</span>
    </VGroup>
  </el-form-item>
  <el-form-item label="产品总采购价：">
    <VGroup>
      <DkInputNumber v-model="formData.product_start_purchase_price" :precision="0" :controls="false" :isInte="true" placeholder="请输入整数：" />
      <div class="v-group-item">
        <svg-icon icon-class="section" />
      </div>
      <DkInputNumber v-model="formData.product_end_purchase_price" :precision="0" :controls="false" :isInte="true" placeholder="请输入整数：" />
      <span class="v-group-item">RMB</span>
    </VGroup>
  </el-form-item>
  <SelectProduct v-model:visible="visibleProductSku" :multiple="true" :selectIds="skuList" @uploadSku="handleProductSku" />
</template>

<style scoped lang="scss"></style>
